<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <span class="state">
          <img src="/@/assets/images/table.png" alt="" />
          文档提取
        </span>
        <div class="custom-tabs">
          <div class="active">电子发票</div>
          <div>租赁物转移告知函</div>
          <div>电子合同</div>
        </div>
      </div>
      <a-row>
        <a-form layout="inline" class="query-form" :model="queryForm">
          <a-col :span="6">
            <a-form-item>
              <div class="download"><img src="/@/assets/images/download.png" alt="" />选择下载</div>
            </a-form-item>
          </a-col>
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.code" placeholder="客户名称" />
          </a-form-item>
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.name" placeholder="合同名称" />
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model="queryForm.state" placeholder="物品名称">
              <a-option label="Zone one" value="shanghai" />
              <a-option label="Zone two" value="beijing" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-input style="width: 170rem" v-model="queryForm.name" placeholder="票据主体" />
          </a-form-item>
          <a-form-item>
            <a-range-picker separator="≒">
              <template #suffixIcon>
                <SmileOutlined />
              </template>
            </a-range-picker>
          </a-form-item>

          <a-form-item>
            <a-button class="submit" type="primary" @click="onSubmit">查询</a-button>
            <a-button class="cancel">重置</a-button>
          </a-form-item>
        </a-form>
      </a-row>
      <a-table :row-selection="rowSelection" :pagination="false" :dataSource="dataSource" :columns="columns" :scroll="{ y: '63vh' }">
        <template #operate="{ record }">
          <span class="operate-btn">查看</span>
        </template>
        <template #state="{ record }">
          <a-button type="link" style="color: #1169e5">签约中</a-button>
          <a-button type="link" style="color: #15ce19">签约成功</a-button>
          <a-button type="link" style="color: #e51111">签约失败</a-button>
        </template>
      </a-table>
      <a-pagination class="pager" :total="50" show-size-changer show-quick-jumper />
      
    </div>
  </div>
</template>

<script>
  import ThePagination from '/@/components/system/the-pagination/index.vue';
  export default {
    components: {
      ThePagination,
    },
    data() {
      return {
        queryForm: {
          state: '',
          code: '',
          name: '',
        },
        dataSource: [
          
        ],
        columns: [
          {
            title: '客户名称',
            key: 'a',
            dataIndex: 'a',
            align:'center',
            
          },
          {
            title: '合同名称',
            key: 'b',
            dataIndex: 'b',
            align:'center',
          },
          {
            title: '票据主体',
            key: 'c',
            dataIndex: 'c',
            align:'center',
          },
          {
            title: '物品名称',
            key: 'd',
            dataIndex: 'd',
            align:'center',
          },
          {
            title: '金额(元)',
            key: 'e',
            dataIndex: 'e',
            align:'center',
          },
          {
            title: '生成时间',
            key: 'f',
            dataIndex: 'f',
            align:'center',
            slots: { customRender: 'state' },
          },
          {
            title: '操作',
            key: 'operate',
            dataIndex: 'operate',
            align:'center',
            slots: { customRender: 'operate' },
          },
        ],
        rowSelection: {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows);
          },
        },
      };
    },
  };
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 0 20rem;
    box-sizing: border-box;
    .query {
      width: 100%;
      display: flex;
      margin: 24rem 0;
      box-sizing: border-box;
      .state {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 22rem;
        color: #1169e5;
        margin-right: 200rem;
        img {
          width: 20rem;
          height: 19rem;
          margin-right: 14rem;
        }
      }
      .custom-tabs {
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei;
        font-size: 22rem;
        color: #a3a3a3;
        div {
          margin: 0 25rem;
          cursor: pointer;
          padding-bottom: 7rem;
        }
        .active {
          color: #000000;
          border-bottom: 2rem solid #8d3332;
        }
      }
    }
    .query-form {
      width: 100%;
      display: flex;
      margin-bottom: 19rem;
      .submit {
        background-color: #fc5451 !important;
      }
      .download {
        img {
          width: 14rem;
          height: 14rem;
          margin-right: 7rem;
        }
        font-family: Microsoft YaHei;
        font-size: 14rem;
        color: #fc5451;
      }
    }
    .list {
      flex: 1;
      padding: 1rem 0 0 24rem;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      .card {
        margin: 0 30rem 30rem 0;
      }
    }
  }
</style>
